<template>
  <div class="container">
    <Navbar />
    
    <div class="auth-container">
      <div class="auth-tabs">
        <router-link to="/login" class="auth-tab">登录</router-link>
        <div class="auth-tab active">注册</div>
      </div>
      
      <div class="auth-form">
        <div class="form-group">
          <label>用户名</label>
          <input type="text" v-model="username" placeholder="请设置用户名">
        </div>
        <div class="form-group">
          <label>邮箱</label>
          <input type="email" v-model="email" placeholder="请输入邮箱">
        </div>
        <div class="form-group">
          <label>密码</label>
          <input type="password" v-model="password" placeholder="请设置密码">
        </div>
        <div class="form-group">
          <label>确认密码</label>
          <input type="password" v-model="confirmPassword" placeholder="请再次输入密码">
        </div>
        <div class="form-actions">
          <label class="agreement">
            <input type="checkbox" v-model="agreeTerms">
            <span>我已阅读并同意<a href="#">用户协议</a>和<a href="#">隐私政策</a></span>
          </label>
        </div>
        <button class="auth-button" @click="register">注册</button>
      </div>
    </div>
  </div>
</template>

<script setup>
/**
 * 用户注册页组件
 * @component Register
 */
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import Navbar from '../../components/Navbar.vue'

const router = useRouter()
const username = ref('')
const email = ref('')
const password = ref('')
const confirmPassword = ref('')
const agreeTerms = ref(false)

// 注册方法
const register = () => {
  // 这里应该添加表单验证
  if (!username.value || !email.value || !password.value) {
    alert('请填写完整信息')
    return
  }
  
  if (password.value !== confirmPassword.value) {
    alert('两次输入的密码不一致')
    return
  }
  
  if (!agreeTerms.value) {
    alert('请同意用户协议和隐私政策')
    return
  }
  
  // 在实际应用中，这里会发送注册请求
  console.log('注册信息:', {
    username: username.value,
    email: email.value,
    password: password.value
  })
  
  // 注册成功后跳转到登录页
  router.push('/login')
}
</script>

<style scoped>
.auth-container {
  max-width: 500px;
  margin: 0 auto;
  background: white;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.auth-tabs {
  display: flex;
  border-bottom: 1px solid #eee;
}

.auth-tab {
  flex: 1;
  text-align: center;
  padding: 15px;
  cursor: pointer;
  color: #666;
  text-decoration: none;
}

.auth-tab.active {
  color: #0078ff;
  font-weight: bold;
  border-bottom: 2px solid #0078ff;
}

.auth-form {
  padding: 30px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  color: #666;
}

.form-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.form-actions {
  margin-bottom: 20px;
}

.agreement {
  display: flex;
  align-items: center;
  gap: 5px;
}

.agreement a {
  color: #0078ff;
  text-decoration: none;
}

.auth-button {
  width: 100%;
  padding: 12px;
  background: #0078ff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}
</style> 